<template>
  <div class="more">
    <div class="top">
      <p>更多推荐</p>
      <i @click="returnUp"></i>
    </div>

    <search-end :msg="msg" :isShow="isShow"></search-end>
  </div>
</template>

<script>
import searchEnd from "@/components/SearchEnd";

import { get } from "@/http/request.js";

export default {
  name: "More",
  data() {
    return {
      msg: [],
      styles: [],
      isShow: true,
    };
  },
  components: {
    searchEnd,
  },
  methods: {
    // 漫画推荐
    async more() {
      await get(
        `https://apis.netstart.cn/bcomic/GetClassPageSixComics?id=136&pageNum=1&pageSize=100&isAll=1`
      ).then((data) => {
        if (data && data.code === 0) {
          let arr = data.data.roll_six_comics
            .sort(() => Math.random() - 0.5)
            .slice(0, 15);
          let arr2 = [];
          arr.forEach((item) => {
            arr2.push({
              id: item.comic_id,
              title: item.title,
              styles: item.style,
              is_finish: item.is_finish,
              author_name: item.author_name,
              vertical_cover: item.vertical_cover,
            });
          });
          this.msg = arr2;
        }
      });
      this.isShow = false;
    },
    // 回退一个页面
    returnUp() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.more();
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";

.more {
  padding: $p;
  .top {
    position: relative;
    p {
      text-align: center;
      height: 13.3333vw;
      line-height: 13.3333vw;
      font-size: 4.8vw;
    }
    i {
      position: absolute;
      width: 5.3333vw;
      height: 5.3333vw;
      left: 0;
      top: 4vw;
      background: url("@/assets/左箭头.png") no-repeat center;
      background-size: 100%;
    }
  }
}
</style>